<template>
  <div class="index-container flex-col-c-c h-100 overflow-h">
    <!-- <img class="w-50 mt-50" src="@/assets/images/logob2.png" alt="" /> -->

    <div class="h-20"></div>

    <div class="flex-1 flex-col-c">
      <div class="flex-row-c w-100">
        <!-- <svg-icon name="fzlc" class="logo keep-px" color="#35a4ec" /> -->
        <img class="w-15" src="@/assets/images/rootlogin.png" alt="" />
        <div class="logo-text ml-10">
          <span class="logo-title">整经MES</span> <br />
<!--          <span class="logo-title_ text-color-light">内部培训系统</span>-->
          <img class="w-35 ml-3" src="@/assets/images/logo.png" alt="" />
        </div>
      </div>
      <van-form @submit="onSubmit" ref="formRef" class="mt-60">
        <van-cell-group inset>
          <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            class="mb-10"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div class="mt-70 text-c">
          <van-button
            :loading="loading"
            loading-type="登录中..."
            class="w-85 ma-c"
            round
            block
            type="primary"
            native-type="submit"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </div>

    <div class="footer h-50 pos-rel overflow-h w-100">
<!--      <svg-icon name="meeting-bg" class="logo keep-px" color="#35a4ec" />-->
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useStore from '@/store/index';
import cache from '@/utils/cache';
import { getUrlKey } from '@/utils/util';
import { login, getCaptchaImage } from '@/api/login';

import { encrypt, decrypt } from '@/utils/jsencrypt';

const router = useRouter();
const form = ref({});
const { user } = useStore();
const loading = ref(false);
// watch(() =>
//   router.currentRoute.value.params,
//   (params) => {
//     // meta.value = metaVal
//     // img.value = params.code
//   },{immediate: true,deep: true}
// )

onBeforeMount(() => {
  // if (cache.local.getTokenloc()) {
  //   router.push({ name: 'home' });
  // }
});

async function getCaptcha() {
  try {
    const res = await getCaptchaImage();
    form.value.uuid = uuid;
  } catch (err) {
    console.log(err);
  }
}

async function onSubmit(values) {
  loading.value = true;
  try {
    // await getCaptcha();
    // values.password = encrypt(values.password)
    values.appId = 1104
    values.isVerify = 'N'
    await user.login({ ...form.value, ...values });
    router.push('/home');
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  //background: #f7f7f9;

  .van-form {
    // box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    // border: 1px solid #f9f9f9
    min-height: 150px;
    .van-button {
      height: 10vw;
    }
  }

  .van-cell-group {
    background: transparent;
    border-radius: 3px;
  }

  .van-cell {
    background: #9175530d;
  }

  .logo {
    width: 100vw;
    height: 100%;
    background: #f7f7f9;
  }

  .wx-box {
    display: inline-block;
    padding: 8px 15px;
    background: #f4ae4521;
    border-radius: 3px;

    .wx-logo {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
  }

  .logo-text {
    width: 100px;
    img {
      width: 80%;
    }
    .logo-title {
      font-weight: 300;
      font-size: 24px;

      // letter-spacing: 7px;
    }

    .logo-title_ {
      // letter-spacing: 3px;
      font-size: 15px;
    }
    font-family: 'Monitor';
  }

  .pos-rel {
    .lh-right {
      transform: rotateY(180deg);
    }
  }
}

.footer {
  background: url('@/assets/images/login-bg.png') no-repeat center center/ 85%;
}
</style>
